<template>
  <div id="home">
    <SearchInput ref="search2" v-show="isShow"  @click.native="$router.push('/search')" />
    <filter-view ref="filterTop2" v-show="isfilter"/>
    <Scroll class="content" 
            ref="scroll" 
            @scroll="contentback"
            :probe-type="3" 
            :pullingup='true'
            @pillingUp='finishPullUp'
            >
      <Position />
      <SearchInput @click.native="$router.push('/search')" ref="search1" :class="{'active':isMask}"/>
      <swiper :data="swipeImgs"  @imgLoad='imgLoad'/>
      <entries :entries="entries" />
      <!-- 推荐商家 -->
      <div class="shoplist-title">推荐商家</div>
      <filter-view @handlerMask='handlerMask' @update='update' ref="filterTop1" />
        <index-shop @imgLoad2='imgLoad2' :key="index" :restaurant="item.restaurant" v-for="(item, index) in restaurants"/>
      <div v-show="isText" class="text">让你看光了</div>
    </Scroll>
  </div>
</template>

<script>
import { List,PullRefresh } from 'vant';
import Position from "./childCpns/Position";
import SearchInput from "./childCpns/SearchInput";
import Entries from "./childCpns/entries";
import IndexShop from "./childCpns/IndexShop";
import Scroll from "@/components/scroll/Scroll";
import Swiper from "@/components/Swiper/Swiper";
import FilterView from "@/components/FilterView";
export default {
  name: "Home",
  components: {
    [List.name]:List,
    [PullRefresh.name]:PullRefresh,
    Position,
    SearchInput,
    Scroll,
    Swiper,
    Entries,
    FilterView,
    IndexShop
  },
  data() {
    return {
      isShow: false,
      isfilter:false,
      SearchTop: 0,
      filterTop: 0,
      swipeImgs: [],
      entries: [],
      filterData: null,
      isMask:false,
      page:1,
      size:5,
      restaurants:[],
      isText:false,
      data:null
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.obtainSearch();
  },
  methods: {
    // 数据请求
    getData() {
      axios("/api/profile/shopping").then(res => {
        this.swipeImgs = res.swipeImgs;
        this.entries = res.entries;
      });
      axios("/api/profile/filter").then(res => {
        this.filterData = res;
      });
      axios.post(`/api/profile/restaurants/${this.page}/${this.size}`).then(res => {
        this.restaurants=res
        this.refreshing = false;
      });
    },
    // 判断是否显示
    contentback(position) {
      this.isShow = position.y < this.SearchTop;
      this.isfilter = position.y < this.filterTop+55
    },
    // 获取元素到顶部的距离
    obtainSearch() {
      this.$nextTick(() => {
        this.SearchTop = -this.$refs.search1.$el.offsetTop; 
      });
    },
    imgLoad(){
      this.filterTop = -this.$refs.filterTop1.$el.offsetTop; 
    },
    // 遮罩层
    handlerMask(is){
      this.isMask=is
    },
    // 刷新
    imgLoad2(){
      this.$refs.scroll.refresh()
    },
    // 下拉刷新
    finishPullUp(){
     this.page++
      axios.post(`/api/profile/restaurants/${this.page}/${this.size}`).then(res => {
        let arr=[]
        arr.push(...res)
        this.restaurants.push(...arr)
       
        if(res.length<this.size){
          this.isText=true
        }else{
           this.$refs.scroll.finishPullUp()
        }
      });
      
    },
    update(code){
      if( typeof code !== 'object' ){
        this.data={condition:code}
      }else{
        this.data=code
      }
      axios.post(`/api/profile/restaurants/${this.page}/${this.size}`,this.data).then(res => {
        this.restaurants=res
        this.refreshing = false;
      });
      
    }
  }
};
</script>

<style scoped>
.home {
  height: 100vh;
  position: relative;
}
.content {
  /*  height: calc(100vh - 50px); */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  overflow: hidden;
}
/* 推荐商家 */
.shoplist-title {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
  color: #333333;
  background: #ffffff;
}

.shoplist-title:before,
.shoplist-title:after {
  display: block;
  content: "一";
}

.shoplist-title:before {
  margin-right: 10px;
}

.shoplist-title:after {
  margin-left: 10px;
}
.active{
  position:fixed ;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}
.text{
  width: 100%;
  text-align: center;
  margin-top:5px;
  font-size: 13px;
}
</style>